<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="https://www.chinazhfw.cn/NursingServices/front/css/common.css" media="screen and (max-width:1658px)">
  <link rel="stylesheet" href="./css/media.css" media="screen and (min-width:1659px)">
  <link rel="stylesheet" href="./css/index.css">
  <title>证书查询</title>
  <style>
    .certificated .certificateBox{
      padding-bottom: 130px;
    }
  </style>
</head>

<body>

  <div class="top-container">
    <div class="top-header">

      <a href="index.html">
        <span class="logo-icon"><img src="./img/head_logo.png"></span>
        <span class="line-height"></span>
        <span class="logo-text"><img src="./img/head_logo_text.svg"></span>
      </a>

      <div class="header-right">
        <span class="head-parentbaby"> <img src="./img/head_parentbaby.svg" alt=""></span>
        <div class="head-search">
          <p>互联网+婴幼儿照护服务第一平台</p>
          <input id="search_keyword" type="text" placeholder="搜索">
          <div class="search_button" onclick="location.href = 'search.html?text='+$('#search_keyword').val();">
            <img src="./img/search_icon.png" alt="">
          </div>
        </div>

        <p class="head-wechat">
          <img src="./img/erweima.png" alt="">
          <span>托育机构备案系统</span>
        </p>
        <p class="head-wechat">
          <img src="./img/erweima.jpg" alt="">
          <span>官方微信公众号</span>
        </p>
      </div>
    </div>
  </div>

  <div class="certificated">

    <div class="certificateBox">

      <div class="certificateImg">

        <div class="swiper mySwiper">
          <div class="swiper-wrapper">

          </div>
          <div class="swiper-pagination"></div>
        </div>

      </div>

      <div class="certificateScribe">

        <p class="resultName">1+X证书制度试点 <br />（幼儿照护）</p>
        <p class="resultBook">师资培训证书</p>
        <dl class="resultList">
          <dd><span class="adjective">证书编号：</span><span class="resultInfo serial">JZ20432302020048</span></dd>
          <!-- <dd><span class="adjective">获证时间：</span><span class="resultInfo time">2023-03-01 14:29:21</span></dd> -->
          <dd><span class="adjective">是否有效：</span><span class="resultInfo benefit">有效</span></dd>
        </dl>

        <div class="resultBut">
          <a href="certificate.html" class="resultBack">返回</a>
          <a href="#" class="resultDown" download>下载证书</a>
          <a href="#" class="resultDown1" download>下载证书</a>
        </div>

      </div>

    </div>

  </div>

  <script src="https://www.jz1x.com/js/jquery.min.js?v=2.1.4"></script>
  <script src="./js/swiper.min.js"></script>
  <script>

    let banner = JSON.parse(localStorage.getItem('swiper')), str = '';

    banner.forEach(function (v) {
      $(".serial").html(v.certificateNo);
      // $(".time").html(v.addTime.substring(0,10));
      $(".resultBook").html(v.certificatesType);
      $(".serial").html(v.certificateNo);
      if( v.isEffective == 1 ){
        $(".benefit").html('有效')
      }

      if( v.type == '8' ){
        str += `
              <div class="downPdf">
                <img src="./img/pdf.png">
                <p>文件暂不支持在线预览<br/>可选择下载文件进行查看</p>
              </div>
            `;
            $(".resultDown").hide();
            $(".resultDown1").attr('href', v.cerImg)
            $(".certificateImg").html(str);
      }else{
        str += `
              <div class="swiper-slide">
                <img src="${v.cerImg}">
              </div>
            `;
        $(".swiper-wrapper").html(str)
        $(".resultDown1").hide();
      }
    });

    var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        loop:true,
        autoplay:true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        }
    });

    $(".resultDown").click(function(){
      let index = $(".swiper-pagination-bullet-active").attr('aria-label');
          index = parseInt(index.replace(/[A-Za-z]/g,''));
          $(this).attr('href',$(".swiper-slide").eq(index).find('img').attr('src'))
    })

  </script>


</body>

</html>
